<script setup lang="ts">
import { ref, reactive } from 'vue'

const text = ref('')

interface TextStats {
  characters: number
  charactersNoSpace: number
  words: number
  lines: number
  paragraphs: number
  chineseChars: number
  englishWords: number
}

const stats = reactive<TextStats>({
  characters: 0,
  charactersNoSpace: 0,
  words: 0,
  lines: 0,
  paragraphs: 0,
  chineseChars: 0,
  englishWords: 0
})

const updateStats = () => {
  const content = text.value

  // 基础统计
  stats.characters = content.length
  stats.charactersNoSpace = content.replace(/\s/g, '').length
  stats.lines = content ? content.split('\n').length : 0
  stats.paragraphs = content ? content.split(/\n\s*\n/).filter(Boolean).length : 0

  // 中文字数统计
  stats.chineseChars = (content.match(/[\u4e00-\u9fa5]/g) || []).length

  // 英文单词统计
  stats.englishWords = content
    ? content.match(/[a-zA-Z]+/g)?.length || 0
    : 0

  // 总字数统计（中文字符 + 英文单词）
  stats.words = stats.chineseChars + stats.englishWords
}
</script>

<template>
  <div class="p-4">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">文本统计器</h2>
    
    <!-- 输入区域 -->
    <div class="mb-6">
      <textarea
        v-model="text"
        placeholder="在此输入或粘贴文本..."
        class="w-full h-64 p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
        @input="updateStats"
      ></textarea>
    </div>

    <!-- 统计结果 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
        <div class="text-sm text-gray-500 dark:text-gray-400">字符数（含空格）</div>
        <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ stats.characters }}</div>
      </div>
      
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
        <div class="text-sm text-gray-500 dark:text-gray-400">字数</div>
        <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ stats.words }}</div>
      </div>
      
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
        <div class="text-sm text-gray-500 dark:text-gray-400">行数</div>
        <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ stats.lines }}</div>
      </div>
    </div>

    <!-- 详细统计 -->
    <div class="mt-6 bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">详细统计</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-2">字符数（不含空格）</div>
          <div class="text-xl font-bold text-gray-900 dark:text-gray-100">{{ stats.charactersNoSpace }}</div>
        </div>
        <div>
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-2">段落数</div>
          <div class="text-xl font-bold text-gray-900 dark:text-gray-100">{{ stats.paragraphs }}</div>
        </div>
        <div>
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-2">中文字数</div>
          <div class="text-xl font-bold text-gray-900 dark:text-gray-100">{{ stats.chineseChars }}</div>
        </div>
        <div>
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-2">英文单词数</div>
          <div class="text-xl font-bold text-gray-900 dark:text-gray-100">{{ stats.englishWords }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.stats-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 24px;
}

.stats-grid {
  margin-top: 2rem;
}

.stat-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
}
</style>